<template lang="">
  <div class="box" ref="box">
    
  </div>
</template>
<script>
// import * as echarts from "echarts"
export default {
  name: "BarTwo",
  mounted() {
    let myChart = echarts.init(this.$refs.box);
    let myColor = ["#1089e7", "#f57474", "#56d0e3", "#f8b448", "#8b78f6"]
    let option = {
      //标题
      title: {
        text: "主要疫情国家治愈率",
        textAlign: "center",
        left: "50%",
        textStyle: {
          color: "white"
        }
      },
      //x轴
      xAxis: {
        type: "value",      //数值值
        //分割线
        splitLine: {
          show: false
        },
        //x轴轴线
        axisLine: {
          show: false,
        },
        //x轴刻度
        axisTick: {
          show: false
        },
        //x轴文字标签
        axisLabel: {
          show: false
        }
      },
      //y轴
      yAxis: [
        {
          type: "category",     //y轴为类目周
          data: ["美国", "西班牙", "哥伦比亚", "英国", "意大利"],
          //翻转y轴
          inverse: true,
          //刻度
          axisTick: {
            show: false
          },
          //轴线
          axisLine: {
            show: false
          },
          //文字标签
          axisLabel: {
            color: "white"
          }
        },
        {
          type: "category",
          //轴线是否显示
          axisLine: {
            show: false
          },
          //标签
          axisLabel: {
            show: false
          },
          //刻度
          axisTick: {
            show: false
          }

        }
      ]
      ,
      grid: {
        bottom: 25,
        left: 60
      },
      series: [
        {
          type: "bar",
          yAxisIndex: 0,        //对应第1个y轴
          label: {
            show: true,
            color: "#fff",
            formatter: "{c}%"
          },
          data: [
            { name: "美国", value: 77.7 },
            { name: "西班牙", value: 88.1 },
            { name: "哥伦比亚", value: 92.6 },
            { name: "英国", value: 10.4 },
            { name: "意大利", value: 13.3 },
          ],
          barWidth: 13,
          itemStyle: {
            borderRadius: 10,
            color: function (param) {
              return myColor[param.dataIndex]
            }
          }
        },
        {
          type: "bar",
          yAxisIndex: 1,        //对应第2个y轴
          barWidth: 16,
          data: [100, 100, 100, 100, 100],
          itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderRadius: 10
          }
        }
      ]
    }
    myChart.setOption(option)
    window.addEventListener("resize",()=>{
      myChart.resize()
    })


  }

}
</script>
<style lang="less" scoped>
.box {
  height: 250px;
}
</style>